<template>
  <div style="padding-left: 10%;padding-right: 10%;">
    <Row>
      <i-col span="4">
        <Menu style="margin-top: 50px;" active-name="1-2">
          <MenuItem name="1-1" to="/index/ucenter/myClass" style="font-size: 20px;">我的课程</MenuItem>
          <MenuItem name="1-2" to="/index/ucenter/myOrder" style="font-size: 20px;">订单中心</MenuItem>
          <MenuItem name="1-3" to="/index/ucenter/settings" style="font-size: 20px;">个人设置</MenuItem>
        </Menu>
      </i-col>
      <i-col v-if="courseList.length > 0" span="20" style="padding-left: 45px;margin-top: 50px;">
        <Card style="margin-bottom: 15px;" v-for="(item, index) in courseList" :key="index">
          <Row>
            <i-col span="24" style="border-bottom: #a1a9bb 2px solid;margin-bottom: 15px;">
              <div style="padding-bottom: 5px;">
                <span style="font-size: 15px;">订单编号：{{item.order.orderId}}</span>
                <span style="font-size: 15px;margin-left: 25px;">{{formatDate(new Date(item.order.creatTime), 'yyyy-MM-dd hh:mm')}}</span>
              </div>
            </i-col>
            <i-col span="4">
              <img :src="item.sysCourse.handcover" style="width: 100%;">
            </i-col>
            <i-col span="12" style="padding-left: 15px;">
              <div style="font-size: 20px;">{{item.sysCourse.courseName}}</div>
              <div style="color: #e13d13;margin-top: 45px;">￥{{item.sysCourse.price}}</div>
            </i-col>
            <i-col span="4">
              <div style="color: #e13d13;font-size: 18px;margin-top: 45px;">￥{{item.sysCourse.price}}</div>
            </i-col>
            <i-col span="4" style="margin-top: 45px;">
              <Button v-if="item.order.pay === '1'" type="warning">已支付</Button>
              <Button v-else type="error" @click="goPay(item.order.orderId)">去支付</Button>
            </i-col>
          </Row>
        </Card>
        <Page :total="total" @on-change="pageChange" style="margin-top: 15px;text-align: center;"/>
      </i-col>
      <i-col v-else span="20" style="padding-left: 45px;margin-top: 50px;">
        <Card>
          <p style="text-align: center">暂无订单</p>
        </Card>
      </i-col>
    </Row>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      courseList: [],
      size: 10,
      number: 1,
      total: 0
    }
  },
  methods: {
    getCoursePage() {
      let url = '/api/order/page'
      let params = this.$qs.stringify({
        size: this.size,
        number: this.number
      })
      this.$post(url, params).then((res) => {
        if (res.code === 0) {
          this.courseList = res.data
          this.total = res.total
        }
      })
    },
    goPay(id) {
      this.$router.push({path: '/index/pay-confirm', query: {orderId: id}})
    },
    pageChange(change) {
      this.number = change
      this.getCoursePage()
    },
    formatDate (date, fmt) {
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      }
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + ''
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str))
        }
      }
      return fmt
    },
    padLeftZero (str) {
      return ('00' + str).substr(str.length)
    }
  },
  mounted () {
    this.getCoursePage()
  }
}
</script>

<style scoped>
  .time{
    font-size: 14px;
    font-weight: bold;
  }
  .content{
    padding-left: 5px;
  }
</style>
